<template>
  <div class="completion_current">
    <mes-search-comp
      :searchList="currentCols"
      ref="mesSearch"
      :searchResult="searchResult"
      @searchInfo="search"
    ></mes-search-comp>
    <div class="table_container">
      <el-table
        ref="tableNode"
        v-loading="isLoading"
        :max-height="tableMaxHeight"
        :data="paginateList"
        @sort-change="handleSortChange"
        border
        stripe
        tooltip-effect="dark">
        <mes-col-comp
          :key="index"
          v-for="(column, index) in currentCols"
          :column="column">
        </mes-col-comp>
        <el-table-column
          prop="complete"
          label="齐套状态"
          show-overflow-tooltip
          sortable="custom"
          align="center">
          <template slot-scope="scope">
            <span :class="{span_red: scope.row.complete === '未齐套'}">{{scope.row.complete}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="storeType"
          label="入库类型"
          show-overflow-tooltip
          sortable="custom"
          align="center">
          <template slot-scope="scope">
            <storage-type
              v-if="scope.row.storeType!=='-'&&scope.row.storeType"
              :data="{storeTypeLabel: scope.row.storeType, storeTypeValue: scope.row.storeType === '实物入库' ? 'Entity' : 'Virtual' }">
            </storage-type>
          </template>
        </el-table-column>
        <el-table-column
          prop="is"
          :resizable="false"
          label="库存式生产"
          show-overflow-tooltip
          sortable="custom"
          align="center">
          <template slot-scope="scope">
            <bool-type
              v-if="scope.row.is!=='-'&&scope.row.is"
              :data="{label: scope.row.is, value: scope.row.is === '是' ? 'True' : 'False' }">
            </bool-type>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="handlePageChange"
      :current-page="pageNo"
      :total="filterList.length || 0"
      :page-size="pageSize">
    </mes-pagination>
  </div>
</template>

<script>
/**
 * @author liubaohui
 */
import {BoolType, StorageType} from '../../../../../components/mesDict'
import currentCols from './currentCols'
import frontSearch from '../../../../../utils/frontSearch'
import compareFn from '../../../../../utils/compareFn'
// 获取当前齐套
let checkCompletenessInterface = 'a/workorder/workorder/checkcompleteness'

export default {
  name: 'CompletionCurrent',
  components: {
    BoolType,
    StorageType
  },
  data() {
    return {
      currentCols: currentCols,
      workorderId: '', // 工单id
      workorderNumber: '', // 工单编号
      isLoading: false, // 数据加载中
      searchParams: {}, // 查询参数
      sortOrder: {}, // 排序对象
      filterList: [], // 搜索后的列表
      pageSize: 15,
      pageNo: 1
    }
  },
  computed: {
    searchResult() {
      return this.filterList.length
    },
    // 分页后的列表数据
    paginateList() {
      return this.filterList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    // 列表数据
    listData() {
      return this.$store.state.completionInfo.currentList
    },
  },
  methods: {
    cleanData() {
      this.$store.state.completionInfo.currentList = []
      this.filterList = []
    },
    async handleSortChange(item) {
      this.sortOrder = this.$getSortOrder(item)
      await this.init()
      if (Object.keys(this.sortOrder).length === 0) return
      this.frontSort()
    },
    frontSort() {
      let sortKey = Object.keys(this.sortOrder)[0]
      let sortType = Object.values(this.sortOrder)[0]
      this.filterList.sort((a, b) => compareFn(a, b, sortKey, sortType))
    },
    // 分页变化时
    handlePageChange(page) {
      this.pageSize = page.pageSize
      this.pageNo = page.pageNo
    },
    // 获取工单
    setWorkorder(workorderId, workorderNumber) {
      this.workorderId = workorderId
      this.workorderNumber = workorderNumber
      this.refresh()
    },
    // 初始化方法
    init() {
      this.isLoading = true
      // id为undefined 清空表格数据
      if (!this.workorderId) {
        this.$store.commit('ClearCurrentList')
        this.isLoading = false
        return
      }
      let req = {
        method: 'post',
        url: checkCompletenessInterface,
        module: 'completionInfo',
        state: 'currentList',
        data: {
          workorderId: this.workorderId || undefined,
          workorderNumber: this.workorderNumber || undefined,
        }
      }
      return this.$store.dispatch('saveData', req).then(() => {
        this.pageNo = 1
        this.filterList = frontSearch(this.listData, this.searchParams, this.searchList)
          // 默认以可生产套数从大到小排列
          .sort((a, b) => compareFn(a, b, 'producibleQuantity', 'desc'))
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新方法
    refresh() {
      this.searchParams = {}
      this.sortOrder = {}
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 搜索方法
    search(params) {
      this.sortOrder = {} // 排序对象
      this.$refs.tableNode.clearSort()
      this.searchParams = params
      this.init()
    }
  }
}
</script>

<style lang="less" scoped>
  .completion_current .span_red {
    color: #f8000f;
  }
</style>
